<template>
  <div class="login-log-list">
    <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" class="pa-5">
      <avue-crud
        ref="crud"
        v-model="form"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        :search.sync="searchForm"
        @on-load="loadListData"
        @search-change="onSearchChange"
        @search-reset="onCustomSearchReset"
        @refresh-change="onRefresh"
        @selection-change="onSelectionChange"
        @filter-change="onFilterChange"
        @sort-change="onSortChange"
      >
        <template slot="menuLeft">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="onAdd">新建</el-button>
        </template>
        <template slot="createdAtSearch" slot-scope="{ size }">
          <el-date-picker
            v-model="daterange"
            :size="size"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="onDateRangeChange"
          >
          </el-date-picker>
        </template>
        <template slot="menu" slot-scope="{ row }">
          <el-button type="text" size="small" @click="goDetail(row)">详情</el-button>
          <el-button type="text" size="small" @click="goEdit(row)">编辑</el-button>
          <el-button v-if="row.publishStatus != 1" type="text" size="small" @click="onRowDelete(row)">删除</el-button>
          <el-button type="text" size="small" @click="goDesign(row)">探源</el-button>
          <!-- <el-button type="text" size="small">提交</el-button> -->
          <!-- <el-button type="text" size="small">撤回</el-button> -->
        </template>
        <template slot="publishStatus" slot-scope="{ row }">
          <span v-if="row.publishStatus > 0">
            <span class="status-dot success"></span>
            已发布
          </span>
          <span v-else>
            <span class="status-dot danger"></span>
            未发布
          </span>
        </template>
        <template slot="status" slot-scope="{ row }">
          <span v-if="row.status === '已探源'">
            <span class="status-dot success"></span>
            {{ row.status }}
          </span>
          <span v-else>
            <span class="status-dot info"></span>
            {{ row.status }}
          </span>
        </template>
      </avue-crud>
    </de-container>
  </div>
</template>

<script>
import { requestTargetPage, requestTargetDelete } from '@/api/chart/chart'
import DeContainer from '@/components/dataease/DeContainer'
import ListMixin from '@/utils/mixins/list-mixin'

const DEFAULT_LIST_MAP_FUNC = (item) => {
  const ret = item

  return ret
}
const DEFAULT_EDIT_MAP_FUNC = (item) => {
  const ret = item
  item.switching = false

  return ret
}

//指标极限
export const INDEX_LIMIT_OPTIONS = [
  { label: '正极', value: '正极' },
  { label: '负极', value: '负极' },
]

// 频率
export const FREQUENCY_OPTIONS = [
  { label: '秒', value: '秒' },
  { label: '分钟', value: '分钟' },
  { label: '小时', value: '小时' },
  { label: '日', value: '日' },
  { label: '周', value: '周' },
  { label: '月', value: '月' },
  { label: '年', value: '年' },
]

// 数值类型
export const DATA_TYPE_OPTIONS = [
  { label: '编码类', value: '编码类' },
  { label: '数值类', value: '数值类' },
  { label: '文本类', value: '文本类' },
  { label: '代码类', value: '代码类' },
  { label: '日期类', value: '日期类' },
  { label: '时间类', value: '时间类' },
  { label: '日期时间类', value: '日期时间类' },
  { label: '信息包类', value: '信息包类' },
]

export default {
  name: 'Chart',
  components: { DeContainer },
  mixins: [ListMixin],
  data() {
    return {
      listApi: requestTargetPage,
      deleteApi: requestTargetDelete,
      listMapFunc: DEFAULT_LIST_MAP_FUNC,
      editMapFunc: DEFAULT_EDIT_MAP_FUNC,
      tableOption: {
        menuWidth: 200,
        menuAlign: 'left',
        menuFixed: 'right',
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        selection: false,
        index: true,
        indexFixed: false,
        searchLabelWidth: 100,
        searchMenuPosition: 'left',
        column: [
          {
            label: '指标编码',
            prop: 'code',
            search: true,
            span: 12,
            align: 'left',
            overHidden: true,
            minWidth: 120,
          },
          {
            label: '指标名称',
            prop: 'name',
            span: 12,
            align: 'left',
            search: true,
            overHidden: true,
            minWidth: 120,
          },
          {
            label: '指标分类',
            prop: 'indexType',
            type: 'select',
            span: 12,
            align: 'left',
            search: true,
            overHidden: true,
            dicUrl: '/api/sys/dict/list',
            props: {
              label: 'dictValue',
              value: 'dictValue',
            },
            dicMethod: 'post',
            dicQuery: {
              dictTypeCode: 'martix_type',
            },
            minWidth: 120,
          },
          // {
          //   label: '指标标签',
          //   prop: 'indexLabel',
          //   type: 'select',
          //   search: true,
          //   multiple: true,
          //   clearable: true,
          //   span: 8,
          //   dicUrl: '/matrix/label/query',
          //   allowCreate: true,
          //   filterable: true,
          //   defaultFirstOption: true,
          //   props: {
          //     label: 'name',
          //     value: 'name',
          //   },
          //   dicMethod: 'post',
          // },
          {
            label: '指标定义',
            prop: 'indexDefine',
            span: 12,
            align: 'left',
            overHidden: true,
            minWidth: 120,
          },
          {
            label: '描述',
            prop: 'remark',
            span: 12,
            overHidden: true,
            minWidth: 120,
          },
          {
            label: '责任单位',
            type: 'tree',
            prop: 'company',
            span: 12,
            align: 'center',
            overHidden: true,
            dicUrl: '/api/dept/tree',
            props: {
              label: 'name',
              value: 'deptId',
            },
            search: true,
            dicMethod: 'post',
            minWidth: 120,
          },
          {
            label: '责任岗位',
            type: 'select',
            prop: 'position',
            span: 12,
            align: 'center',
            overHidden: true,
            dicUrl: '/api/sys/post/list',
            props: {
              label: 'postName',
              value: 'id',
            },
            search: true,
            dicMethod: 'get',
            minWidth: 120,
          },
          {
            label: '责任人',
            type: 'select',
            prop: 'director',
            span: 12,
            align: 'center',
            overHidden: true,

            dicUrl: '/api/user/userGrid/1/999',
            props: {
              label: 'nickName',
              value: 'userId',
            },
            dicMethod: 'post',
            dicFormatter: (res) => res.listObject,
            minWidth: 120,
          },
          {
            label: '指标状态',
            prop: 'status',
            span: 12,
            align: 'center',
            overHidden: true,
            minWidth: 120,
          },
          {
            label: '发布状态',
            prop: 'publishStatus',
            type: 'select',
            span: 12,
            align: 'center',
            overHidden: true,
            dicData: [
              { label: '未发布', value: 0 },
              { label: '已发布', value: 1 },
            ],
            minWidth: 120,
          },
          {
            label: '创建时间',
            prop: 'createdAt',
            span: 24,
            width: 150,
            align: 'center',
            search: true,
          },
        ],
      },
    }
  },
  methods: {
    goDetail(row) {
      if (row.status === '已探源') {
        this.$router.push(`/redirect/charts/view/${row.id}/?panelId=${row.panelId}`)
        return
      }
      this.$router.push(`/redirect/charts/${row.id}/view`)
    },
    goEdit(row) {
      this.$router.push(`/redirect/charts/${row.id}/edit`)
    },
    goDesign(row) {
      const routeData = this.$router.resolve({
        name: 'ChartDesign',
        query: { id: row.id, panelId: row.panelId },
      })
      this.$router.push('/redirect' + routeData.route.fullPath)
    },
    onCustomSearchReset() {
      this.onSearchReset()
    },
    onAdd() {
      this.$router.push('/redirect/charts/new')
    },
  },
}
</script>

<style lang="scss"></style>
